<template>
  <div>
    <el-dialog :title="$props.currentRiver.riverName" 
    :visible.sync="show" 
    :modal="false" 
    :close-on-click-modal="false">
      <div class="charts-select">
        <button :class="activeIndex == 0 ? 'active' : ''" @click="showJuPingCharts">逐年面雨量距平时序图</button>
        <button :class="activeIndex == 1 ? 'active' : ''" @click="showSurfaceRainfallCharts">逐年面雨量时序图</button>
      </div>
      <div id="river-info-echarts" ref="echarts"></div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
//注册主题
import essos from '@/assets/theme/essos.json'
echarts.registerTheme("essos",essos);
export default {
  props: ["dialogTableVisible","currentRiver"],
  data() {
    return {
      myCharts:null,
      activeIndex:0,
    };
  },
  computed:{
    show:{
      get(){
        return this.$props.dialogTableVisible;
      },
      set(val){
        this.$emit("closedRiverDialog")
      }
    },
    data(){
      return this.$props.currentRiver;
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.initCharts();
      this.updataCharts();
    })
  },
  methods:{
    //初始化图表
    initCharts(){
      //显示距平值
      const xAxisData = Object.keys(this.data.anomalys);
      this.myCharts = echarts.init(this.$refs.echarts,'essos');
      const initOption = {
      xAxis: {
        type: "category",
        data: xAxisData,
        //x坐标轴两边不留空格
        boundaryGap: false,
      },
      //网格
      grid: {
        left: "3%",
        top: "10%",
        right: "4%",
        bottom: "1%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },

      yAxis: {
        type: "value",
      },
      series: [
        {
          type:"line",
        }
      ],
    };
    this.myCharts.setOption(initOption);
    },
    //更新option的选项
    updataCharts(key="anomalys"){
      const yAxisData = this.data[key] == null ? [] : Object.values(this.data[key]);
      const option = {
      series: [
        {
          data:yAxisData,
        }
      ],
    };
      this.myCharts.setOption(option);
    },
    //显示面雨量距平图
    showJuPingCharts(){
      this.activeIndex = 0;
      this.updataCharts();
    },
    //显示面雨量
    showSurfaceRainfallCharts(){
      this.activeIndex = 1;
      this.updataCharts("precipitations");
    }
  }

};
</script>

<style scoped lang="scss">
#river-info-echarts{
  width: 100%;
  height: 400px;
}
.charts-select{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  button{
    padding: 5px;
    // background-color: white;
    // color: white;
    border: none;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
  }
}
.charts-select .active{
  background-color: #0A86D9;
}
</style>
